<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>
<link href="css/alt_footer.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/nerveslider.css">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

 <body class="no-margin">
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--slider - add your images here-->
	<div class="myslider">
		<img src="img/large/big_slider2.jpg" alt="" >
		<img src="img/large/big_slider1.jpg" alt="">
		<img src="img/large/big_slider3.jpg" alt="">
		</div>
		<!-- /SLIDER -->

	<div id="banner">
	<div class="container intro_wrapper">
	<div class="inner_content">
	
	<!--welcome-->
		<div class="welcome_index">
			I think most <a href="#"><span class="hue_block white normal">programmers</span></a> spend the first 5 years of their career mastering 
			<span class="hue">complexity</span>	and the rest of their lives learning <span>simplicity</span>
			- Buzz Andersen
		</div>
	<!--//welcome-->
		</div>
			</div>
				</div>
				<!--//banner-->
				
		<div class="container wrapper">
			<div class="inner_content">
		<div class="col-md-12 pad45">
		
		<div class="row">
		<div class="row">
        <div class="col-sm-6 col-md-3">
          <div class="tile">
            <img class="tile-image" alt="" src="img/illustrations/map.png" />
            <h3 class="tile-title">Flat Design</h3>
            <p>Nam ea labitur pericula. Meis tamquam pro te pri id mazim nostrud diceret.</p>
            <h6><a class="btn btn-primary btn-custom btn-rounded" href="#"><b>read more</b></a></h6>
          </div>
        </div>

        <div class="col-sm-6 col-md-3">
          <div class="tile">
            <img class="tile-image" alt="" src="img/illustrations/calendar.png" />
            <h3 class="tile-title">Easy to Customize</h3>
            <p>Nam ea labitur pericula. Meis tamquam pro te pri id mazim nostrud diceret.</p>
             <h6><a class="btn btn-primary btn-custom btn-rounded" href="#"><b>read more</b></a></h6>
          </div>
        </div>

        <div class="col-sm-6 col-md-3">
          <div class="tile">
            <img class="tile-image" alt="" src="img/illustrations/colors.png" />
            <h3 class="tile-title">Retina Icons</h3>
            <p>Nam ea labitur pericula. Meis tamquam pro te pri id mazim nostrud diceret.</p>
             <h6><a class="btn btn-primary btn-custom btn-rounded" href="#"><b>read more</b></a></h6>
          </div>
        </div>

        <div class="col-sm-6 col-md-3">
          <div class="tile tile-hot">
            <img class="tile-image" alt="" src="img/illustrations/share.png" />
            <h3 class="tile-title">Modern</h3>
            <p>Nam ea labitur pericula. Meis tamquam pro te pri id mazim nostrud diceret.</p>
             <h6><a class="btn btn-primary btn-custom btn-rounded" href="#"><b>read more</b></a></h6>
          </div>
		</div>
      </div><!-- /tiles -->
	</div>
		</div>

		<div class="pad45 hidden-xs hidden-sm"></div> 
			<div class="row">
			<!--col 1-->
			<div class="col-md-12">
			<div class="row">
			
			<div class="col-sm-12 col-md-4">
			<h1>Recent Work</h1>
			<h4>
				Lorem ipsum dolor sit amet, rebum putant recusabo in ius, pri simul tempor ne, his ei summo virtute.
			</h4>
			<p>
				Nam ea labitur pericula. Meis tamquam pro te, cibo mutat necessitatibus id vim. An his tamquam postulant, pri id mazim nostrud diceret 
				sapientem eloquentiam sea cu, sea ut exerci delicata. Corrumpit vituperata.
			</p>
			
			<a href="#" class="btn btn-primary btn-custom btn-rounded">view portfolio</a>
			<div class="pad30"></div>
			</div>
			
			<!--column 2 slider-->
			<div class="col-xs-12 col-sm-12 col-md-8 pad30">
			
			<div id="slider_home">
            <div class="slider-item">	
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s1.jpg" data-rel="prettyPhoto">
					<img src="img/small/s1.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">catalogue</a></h3>
				<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s2.jpg" data-rel="prettyPhoto">
					<img src="img/small/s2.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">loupe</a></h3>
				<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s3.jpg" data-rel="prettyPhoto">
					<img src="img/small/s3.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">retro rocket</a></h3>
				<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s4.jpg" data-rel="prettyPhoto">
					<img src="img/small/s4.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">infographics</a></h3>
				<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s5.jpg" data-rel="prettyPhoto">
					<img src="img/small/s5.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">mock up</a></h3>
					<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
					</div>
				</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s6.jpg" data-rel="prettyPhoto">
					<img src="img/small/s6.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">retro badges</a></h3>
					<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
					</div>
				</div>
			
			<div class="slider-item">
			<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s7.jpg" data-rel="prettyPhoto">
					<img src="img/small/s7.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">details</a></h3>
					<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s8.jpg" data-rel="prettyPhoto">
					<img src="img/small/s8.jpg" alt="" /></a>
					</div>
				</div>
				<div class="slider-title">
				<h3><a href="#">vintage form</a></h3>
					<p>An his tamquam postulant, pri id mazim nostrud diceret.</p>
				</div>
			</div>
				</div>
				<div id="sl-prev" class="widget-scroll-prev"><i class="fa fa-chevron-left white"></i></div>
				<div id="sl-next" class="widget-scroll-next"><i class="fa fa-chevron-right white but_marg"></i></div>
			</div>
				</div>
				</div>
			</div>
		</div>
	</div>
	<div class="pad25 hidden-md hidden-lg"></div> 
	<!--//page-->	
	
	<!--footer-->
	<div id="footer_alt">
		<div class="container">
			<div class="row">
			
			<!--column 1-->
			<div class="col-sm-12 col-md-3">
					<h6>get in touch</h6>
				
						<p>
							Sanso tincidunt laoreet est, in trist ique <a href="#">sapien consequat</a>.
							Lorem ipsum dolor sit amet, rebum put ant recusabo in ius, pri simul tempor ne, his ei summo virtute efficiantur. </p>
						<p>
							23 Mornington Crescent<br/>
							Camden High Street<br/>
							London NW1 7JE
						</p>
						
						<p>
							<i class="fa fa-envelope-o hue"></i> 
							<a href="mailto:name@example.com">name@example.com</a><br/>
							<i class="fa fa-phone hue"></i> +44 020 2345 1987
						</p>
					</div>
				
				<!--column 2-->
				<div class="col-sm-12 col-md-3">
					<h6>popular posts</h6>
					<ul class="media-list">
							<li class="media">
								<img class="img-rounded pull-left" src="img/small/pop_post1.jpg" alt="" height="42" width="42">
								<div class="media-body">
								<a href="#">Aliquam convallis erat a enim dictum putant recusabo in ius</a>
								<br/><i class="fa fa-clock-o hue"></i> March 12th 2013</div>
							</li>
							
							<li class="media">
								<img class="img-rounded pull-left" src="img/small/pop_post2.jpg" alt="" height="42" width="42">
								<div class="media-body">
								<a href="#">Aliquam convallis erat a enim dictum putant recusabo in ius</a>
								<br/><i class="fa fa-clock-o hue"></i> Feb 14th 2013
								</div>
							</li>
							
							<li class="media">
								<img class="img-rounded pull-left" src="img/small/pop_post3.jpg" alt="" height="42" width="42">
								<div class="media-body">
								<a href="#">Aliquam convallis erat a enim dictum putant recusabo in ius
							</a>
								<br/><i class="fa fa-clock-o hue"></i> Jan 23rd 2013</div>
							</li>
						</ul>  
							</div>
					
					<!--column 3-->		
					<div class="col-sm-6 col-md-3">
					<h6>latest posts</h6>
				
					<h4>
						<a href="#">Lorem ipsum dolor sit amet</a>
					</h4>
					
					<p>Pellentesque tincidunt laoreet est, sapien consequat.
						Lorem ipsum dolor sit ame.
					</p>
					
					<p>
						<a href="blog_post.html" class="more-link">Continue reading &rarr;</a>
					</p>
					
					
					<h4>
						<a href="#">Lorem ipsum dolor sit amet</a>
					</h4>
					
					<p>Pellentesque tincidunt laoreet est, sapien consequat.
						Lorem ipsum dolor sit ame.
					</p>
					
					<p>
						<a href="blog_post.html" class="more-link">Continue reading &rarr;</a>
					</p>
					</div>
					
					<!--column 4-->
					<div class="col-sm-6 col-md-3">
					
					<!--flickr-->
					<h6>flickr photostream</h6>
					<div class="flickrs">
						<div class="FlickrImages">
							<ul>
							</ul>
							<div class="clear">
							</div>
								</div>
									</div>
				
								<h5>thanks for stopping by!</h5>
					
								<a href="#" class="zocial icon twitter"></a>
								<a href="#" class="zocial icon facebook"></a>
								<a href="#" class="zocial icon linkedin"></a>
								<a href="#" class="zocial icon googleplus"></a>
								<a href="#" class="zocial icon vimeo"></a>
							
							<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
								var d = new Date()
								document.write(d.getFullYear())
								</script>
							 - All Rights Reserved<br/>
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
			</div>
		<!--//footer-->
		<!-- up to top -->
		<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
		<!--//end-->
					
<script src="js/jquery.js"></script>			
<script src="js/bootstrap.min.js"></script>	
<script src="js/retina.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>				
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

<!-- FLICKR  - add your id - find it here - http://idgettr.com/-->
<script type="text/javascript">
//<![CDATA[
   $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=60241562@N08&lang=en-us&format=json&jsoncallback=?", function(data){
		$.each(data.items, function(i,item){
			if(i<=9){ // change this number to display more or less images
				$("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo(".FlickrImages ul")
				.wrap("<li><a href='" + item.link + "' target='_blank' title='Flickr'></a></li>");
			}
		});			
    });	
//]]>
</script>

<!-- carousel -->
<script type="text/javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
	$("#slider_home").carouFredSel({ 
		width : "100%", 
		height : "auto",
		responsive : true,
		auto : false,
		items : { width : 280, visible: { min: 1, max: 3 }
		},
		swipe : { onTouch : true, onMouse : true },
		scroll: { items: 1, },
		prev : { button : "#sl-prev", key : "left"},
		next : { button : "#sl-next", key : "right" }
		});
	});
//]]>
</script>

<!-- slider -->
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.nerveSlider.min.js"></script>
<script>
//<![CDATA[
	$(document).ready(function() {
	$(".myslider").show().nerveSlider({
		sliderResizable: true,
		sliderWidth: "1920px",
		sliderHeight: "920px",
		slideTransitionDirection: "down",
		showFilmstrip :	true,
		showDots: false
		});
	});
//]]>
</script>

</body>
</html>